<template>
    <div class="content">
        <h1>折叠面板</h1>
        <div  class="title">
            <div class="cx">程序员之路</div>
            <!--1、绑定一个点击事件 控制开关-->
            <div class="btn" @click="btn">{{ isShow ? '收起':'展开' }}</div>
        </div>
        <div class="container" v-show="isShow">
            <p>少时狂把编程想</p>
            <p>无畏赴身IT行</p>
            <p>自认代码敲的好</p>
            <p>年底宝马少不了</p>

        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(false)

const btn = () => { 
    isShow.value = !isShow.value

}
</script>

<style scoped>
.content{
    width: 80%;
    height: 600px;
    background-color: beige;
    border-radius: 10px;
    margin: 0 auto;
    h1{
        text-align: center;
        padding-top: 10px;
    }
}
.title{
    text-align: center;
    .cx{
        width: 50%;
        float: left;
        font-weight: 800;
        font-size: 20px;
    }
    .btn{
        width: 49%;
        float: right;
        cursor: pointer;
    }
}
.container{
    width: 60%;
    height: 200px;
    border-radius: 15px;
    background-color: yellowgreen;
    border: 1px solid rebeccapurple;
    margin: 50px auto;
    text-align: center;
    p{
        padding-top: 10px;
    }
}
</style>